import React, { Component } from 'react';
import { Select } from "antd";
import PropTypes from "prop-types";
import Http from '@/request'
const { Option } = Select;
class CustomSelect extends React.Component {
  static propTypes = {
    dataSource: PropTypes.arrayOf(
      PropTypes.shape({
        key: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
          .isRequired,
        label: PropTypes.string
      })
    ),
    onChange: PropTypes.func,
    pagesize:PropTypes.number
  };

  static defaultProps = {
    dataSource: [],
  };

  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      showArr: [],
      list:[],
      pageSize:props.pagesize,
      hasNextPage:false,
      fuzzy:''
    };
    
  }

  pageSt = 0;
  componentWillMount(){
    console.log(this.props)
    // this.getOptionsList()
  }
  getOptionsList=async()=>{
    const {page,fuzzy} =this.state
    const data = {
      page,
      pageSize:this.props.pageSize,
      fuzzy
    }
    let res= await Http.get('/tour/banner/selectList',data)
    if(res.code ==200){
      this.setState({
        list:this.state.list.concat(res.results.result),
        hasNextPage:res.results.hasNextPage
      })
    }
  }
  handleChange = v => {
    const { onChange } = this.props;
    console.log(v)
    onChange && onChange(v);
    this.setState({ page: 1 ,showArr:[],fuzzy:'',hasNextPage:true});
  };

  handlePopupScroll = e => {
    const { page, hasNextPage} = this.state;
    e.persist();
    const { target } = e;
    const st = target.scrollTop;
    if (st === 0 && this.pageSt) {
      target.scrollTop = this.pageSt;
    }
    if (st + target.offsetHeight + 2 >= target.scrollHeight&& hasNextPage) {
      this.setState({ page: page + 1 },function(){
        this.getOptionsList()
      });
      this.pageSt = st;
    } else {
      this.pageSt = 0;
    }
  };

  handleFocus = () => {
    this.prevScroll = 0;
    this.setState({ page: 1 });
  };
  handleOnBlur=()=>{
    this.setState({ page: 1 ,fuzzy:''});
  }
  handleSearch = (v) => {
    // const { list } = this.state;
    // v = v || "";
    // const filterWord = v.trim().toLowerCase();
    // const showArr = list.filter(item =>
    //   item.name.toLowerCase().includes(filterWord)
    // );
    // this.setState({ page: 1, showArr });
    if(this.state.fuzzy !=v.trim()){
      this.setState({ page: 1,fuzzy:v.trim()},async()=>{
        const data = {
          page:this.state.page,
          pageSize:this.props.pageSize,
          fuzzy:v.trim()
        }
        let res= await Http.get('/tour/banner/selectList',data)
        if(res.code ==200){
          this.setState({
            showArr:this.state.showArr.concat(res.results.result),
            hasNextPage:res.results.hasNextPage
          })
        }
      });
    }
  };
  onDropdownVisibleChange =async(open)=>{
     if(open){
       this.setState({
         list:[],
         page:1
       },function(){
        this.getOptionsList()
       })
     }else{
      this.setState({
        showArr:[],
        page:1
      })
     }
  }
  render() {
    const { dataSource, ...rest } = this.props;
    const {  showArr,list } = this.state;
    let mList = []
    if(showArr.length>0){
      mList  = showArr
    }else{
      mList=list
    }
    return (
      <Select
        onDropdownVisibleChange ={this.onDropdownVisibleChange}
        mode={'multiple'}
        maxTagCount={1}
        {...rest}
        onChange={this.handleChange}
        filterOption={false}
        onPopupScroll={this.handlePopupScroll}
        onFocus={this.handleFocus}
        onBlur={this.handleOnBlur}
        onSearch={this.handleSearch}
        // value={[1,3]}
        showArrow={true}
      >
        {mList.map(opt => (
          <Option key={opt.id} value={opt.id}>
            {opt.name || opt.id}
          </Option>
        ))}
      </Select>
    );
  }
}
export default CustomSelect